import "./index.scss";
import { useNavigate, useLocation } from "react-router-dom";
import { useState } from "react";
import { Form, Modal, message } from "antd";
import TextArea from "antd/es/input/TextArea";
import http from "../../../utils/http";
import { Image } from "antd";

const TeacherDetail2 = () => {
  //取数据
  const state = useLocation();
  console.log("state", state.state);

  //返回老师页面
  const navigate = useNavigate();
  const back = () => {
    navigate("/home/TeacherManage");
  };

  // 不通过
  const [isModalOpenNoPass, setIsModalOpenNoPass] = useState(false);
  const [noPassForm] = Form.useForm();
  const showNoPass = (record: any) => {
    noPassForm.setFieldsValue({ ...record });
    setIsModalOpenNoPass(true);
  };
  const handleOkNoPass = () => {
    const data = noPassForm.getFieldsValue(true);
    http({
      url: "/noPassTeacher2",
      method: "post",
      data: {
        id: state.state.id,
        noreason: data.noreason,
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("未通过成功");
        setIsModalOpenNoPass(false);
        navigate("/home/TeacherManage");
      } else {
        message.error("未通过失败");
      }
    });
  };
  const handleCancelNoPass = () => {
    setIsModalOpenNoPass(false);
  };

  // 通过
  const [isModalOpenPass, setIsModalOpenPass] = useState(false);
  const [passForm] = Form.useForm();
  const showPass = (record: any) => {
    passForm.setFieldsValue({ ...record });
    setIsModalOpenPass(true);
  };
  const handleOkPass = () => {
    const data = passForm.getFieldsValue(true);
    http({
      url: "/passTeacher2",
      method: "post",
      data: {
        id: state.state.id,
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("通过成功");
        setIsModalOpenPass(false);
        navigate("/home/TeacherManage");
      } else {
        message.error("通过失败");
      }
    });
  };
  const handleCancelPass = () => {
    setIsModalOpenPass(false);
  };

  return (
    <div className="teacherDetail">
      <div className="top">
        <div className="top-l">
          <div className="title" onClick={back}>
            老师管理
          </div>
          <div>&gt;</div>
          <div className="detail">详情</div>
        </div>
      </div>

      <div className="hr"></div>

      <div className="context-box">
        <div className="con1">
          <Image width={150} height={220} src={state.state.zjphoto} />
          <div className="name">{state.state.tname}</div>
          <div className="state">{state.state.tstate}</div>
        </div>

        <div className="con2">
          <div className="detail">
            <div className="allTitle">
              <div className="title">所属机构</div>
              <div className="title">教学学科</div>
              <div className="title">性别</div>
              <div className="title">出生年月</div>
              <div className="title">毕业院校专业</div>
              <div className="title">学历</div>
              <div className="title">政治面貌</div>
              <div className="title">籍贯</div>
              <div className="title">是否签约合同</div>
              <div className="title">身份证号码</div>
              <div className="title">资格证类型</div>
              <div className="title">教师资格证种类</div>
              <div className="title">教师资格证编码</div>
            </div>
            <div>
              <div className="text">{state.state.tinstitution}</div>
              <div className="text">{state.state.tcourse}</div>
              <div className="text">{state.state.tsex}</div>
              <div className="text">{state.state.tborn}</div>
              <div className="text">{state.state.graduate}</div>
              <div className="text">{state.state.tdegree}</div>
              <div className="text">{state.state.tface}</div>
              <div className="text">{state.state.origin}</div>
              <div className="text">{state.state.contract}</div>
              <div className="text">{state.state.tidentity}</div>
              <div className="text">教师资格证</div>
              <div className="text">{state.state.tqualtype}</div>
              <div className="text">{state.state.tqualification}</div>
            </div>
          </div>
          <div className="allphoto">
            <div className="ap1">
              <div className="title">身份证照片</div>
              <Image width={100} height={100} src={state.state.idphoto} />
            </div>
            <div className="ap1">
              <div className="title">学历证照片</div>
              <Image width={100} height={100} src={state.state.xlphoto} />
            </div>
            <div className="ap1">
              <div className="title">教师资格证照片</div>
              <Image width={100} height={100} src={state.state.jsphoto} />
            </div>
          </div>
        </div>

        <div className="con3">
          <div className="nopass" onClick={showNoPass}>
            不通过
          </div>
          <div className="pass" onClick={showPass}>
            通过
          </div>
        </div>

        {/*通过框*/}
        <Modal
          title="通过"
          open={isModalOpenPass}
          onOk={handleOkPass}
          onCancel={handleCancelPass}
          okText={"确认"}
          cancelText={"取消"}
          className="pass-box"
        >
          <Form form={passForm}>
            <div>是否同意该老师通过审核？</div>
          </Form>
        </Modal>

        {/*不通过框*/}
        <Modal
          title="不通过"
          open={isModalOpenNoPass}
          onOk={handleOkNoPass}
          onCancel={handleCancelNoPass}
          okText={"确认"}
          cancelText={"取消"}
        >
          <Form
            form={noPassForm}
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 24,
            }}
            autoComplete="off"
          >
            <Form.Item name="noreason">
              <TextArea rows={4} placeholder="请输入不同意理由" />
            </Form.Item>
          </Form>
        </Modal>
      </div>
    </div>
  );
};

export default TeacherDetail2;
